<template>
	<view class="text_center h100">

		<!-- 查询列表盒子 -->
		<view class="query_box query_list_m column_flex_center">
			<view title="点击以复制激活码" @click="copy_fun()">
				<text id="code" class="code_str font_color">{{ code }}
				</text>
				<u-button type="primary" class="el-icon-document-copy" @click="copy_fun()">复制</u-button>
			</view>
		</view>

		<!-- 获取激活码盒子 -->
		<view class="get_code">
			<view class="">
				序列号: {{serial_number}}
			</view>
			<!-- <image :src="qr" width="80%"></image> -->
			<tki-qrcode v-if="code" ref="qrcode" cid="hosCode" size="200" unit="px" :onval="true" :val="code"
				loadingText="正在生成..." :loadMake="true" @result="qrR" />

			<u-button type="primary" background="red" class="el-icon-refresh-left fenxiang_btn" size="medium"
				open-type="share">分享
			</u-button>
		</view>
		<view class="back_btn" v-if="code&&back_btn_state">
			<u-button type="primary" background="red" class="el-icon-refresh-left" size="mini" @click="back_fun">返回
			</u-button>
		</view>
	</view>
</template>

<script>
	// import Qr from '@/tools/wxqrcode.js'
	// import tkiQrcode from "@/node_modules/tki-qrcode/App.vue"
	import tkiQrcode from "tki-qrcode"
	export default {
		data() {
			return {
				code: '1',
				mobile: "m",
				token: '',
				qr: "",
				serial_number: '',
				back_btn_state: false,
				// 到期时间
				dateString: ''
			};
		},
		components: {
			tkiQrcode
		},
		onLoad(data) {
			// console.log(data, 'options')
			this.code = data.code
			this.serial_number = data.serial_number
			this.back_btn_state = data.back_btn_state
			this.dateString = data.dateString
		},
		created() {},
		methods: {
			// 复制内容事件
			copy_fun(dataString) {
				let string = this.dateString
				uni.setClipboardData({
					data: `${this.serial_number}:
					“${this.code}”
					，${string.substr(0,4)}年${string.substr(5,2)}月${string.substr(8,2)}日到期，请合理使用`,
					success() {
						// 提示 复制成功，可以使用激活码了
					},
					fail() {}
				});
			},
			qrR(res) {
				console.log(res, '111')
			},
			onShareAppMessage: function(e) {
				let title = '阿尔法激活码'
				return {
					title: title,
					// path: 'pages/code/code?code='+'fjisodfjoisdjfoisdf'
					path: `pages/code/code?code=${this.code}&serial_number=${this.serial_number}&dateString=${this.dateString}`
				}
			},
			back_fun() {
				this.code = null
				uni.navigateBack()
			}
		},
		mounted() {},
	}
</script>

<style>
	.query_box {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding: 0 50px;
	}

	.query_list_m {
		/* height: 300rpx; */
		padding-top: 1%;
		margin-bottom: 50rpx;
	}

	.get_code {
		border-top: 1px solid #ccc;
		border-radius: 5%;
		height: 80%;
		padding: 5% 10%;
	}

	.get_code>view {
		margin-bottom: 5%;
	}

	.column_flex_center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		padding-top: 80rpx;
		font-size: 30rpx;
	}

	.back_btn {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.code_str {
		display: block;
		margin: 25rpx auto;
		word-break: break-all;
		user-select: all;
	}

	.fenxiang_btn {
		position: relative;
		top: 50rpx;
	}
</style>
